<template>
  <div class="home-block section-1">
    <div class="banner-swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"  v-for="(item, index) in bannerList" :key="index">
          <a :href="item.url || 'javascript:;'" class="banner" :class="{'video-banner': item.video}">
            <template v-if="item.vtype == 2">
              <video :src="item.video" class="fit-img home-video" preload="true" muted="true" autoplay="true" loop="true" :poster="item.photo"></video>
            </template>
            <template v-else>
              <img oncontextmenu="return false" :src="item.photo" class="fit-img" alt="">
            </template>
            <transition name="fadeUp">
              <div class="mbanner-inner" v-if=" swiperIndex == index && item.is_hidden == 0">
                <div class="inner-tag" v-if="item.tag">{{ item.tag }}</div>
                <div class="inner-title" v-if="item.title" v-html="item.title"></div>
                <div class="inner-desc" v-if="item.titles">{{ item.titles }}</div>
                <div class="inner-btn flex-center hv-opacity" v-if="item.search_title">
                  <span class="label">{{ item.search_title }}</span>
                  <i class="iconfont icon-arrow"></i>
                </div>
              </div>
            </transition>
          </a>
        </div>
      </div>
    </div>
    <div class="home-prev-btn flex-center">
      <i class="iconfont icon-arrow_left"></i>
    </div>
    <div class="home-next-btn flex-center">
      <i class="iconfont icon-arrow"></i>
    </div>
    <div class="swiper-bar flex-center">
      <div class="swiper-bar-item" v-for="(item, index) in bannerList" :key="index" :class="{active: index === swiperIndex}">
        <div class="bar-item"></div>
      </div>
      <div class="swiper-start-btn" :class="{'is-start': isStart}" @click="toggleStartStatus">
        <i class="trg" v-if="isStart"></i>
        <i class="b-l" v-if="!isStart"></i>
        <i class="b-r" v-if="!isStart"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Swiper from 'swiper'
import { Mousewheel, Navigation, Autoplay } from 'swiper/modules'
import 'swiper/scss'
import 'swiper/scss/navigation'
import { getBannerList } from '@/api/home'
import { formatText } from '../../utils/utils'

const bannerList = ref([]);
const swiperIndex = ref(0);
const isStart = ref(false)
let bannerSwiper

onMounted(() => {
  loadData()
})

const loadData = () => {
  getBannerList().then(res => {
    bannerList.value = res.data.map(el => {
      el.title = formatText(el.title)
      el.titles = formatText(el.titles)
      return el
    })
    setTimeout(() => {
      initSwiper()
    }, 200)
  })
};

const initSwiper = () => {
  bannerSwiper = new Swiper('.banner-swiper', {
    modules: [Mousewheel, Navigation, Autoplay],
    loop: true,
    loopedSlides: bannerList.value.length * 2,
    autoplay: {
      delay: 7000,
      disableOnInteraction: false,
    },
    speed: 2000,
    navigation: {
      nextEl: '.home-next-btn',
      prevEl: '.home-prev-btn',
    },
    mousewheel: false,
    on: {
      slideChangeTransitionStart: swiper => {
        
      },
      slideChangeTransitionEnd: swiper => {
        swiperIndex.value = swiper.realIndex
      }
    }
  })
};

const toggleStartStatus = () => {
  isStart.value = !isStart.value
  if (isStart.value) {
    bannerSwiper.autoplay.stop()
  } else {
    bannerSwiper.autoplay.start()
  }
};

</script>

<style lang="scss">
.fadeUp-enter-active {
  animation: fadeUp 0.5s ;
}
.fadeUp-enter-from {
  opacity: 0;
  transform: translateY(50px);
}
.fadeUp-enter-to {
  opacity: 1;
  transform: translateY(0);
}
@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.section-1 {
  &:hover {
    .home-next-btn, .home-prev-btn {
      opacity: 1;
    }
  }
}
.home-next-btn, .home-prev-btn {
  width: 3.125rem /* 50/16 */;
  height: 3.125rem /* 50/16 */;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5.1875rem /* 83/16 */);
  position: absolute;
  cursor: pointer;
  z-index: 10;
  &:hover {
    background: #E50012;
    .iconfont {
      color: #FFFFFF;
    }
  }
  .iconfont {
    font-size: 1.125rem /* 18/16 */;
    color: #FFFFFF;
  }
}
.home-prev-btn {
  left: 5rem /* 80/16 */;
  top: 50%;
  transform: translateY(-50%);
}
.home-next-btn {
  right: 5rem /* 80/16 */;
  top: 50%;
  transform: translateY(-50%);
}
.mbanner-inner {
  position: absolute;
  top: 30vh;
  width: calc(100% - 27.5rem /* 440/16 */);
  left: 13.75rem /* 220/16 */;
  
  z-index: 10;
  .inner-tag {
    font-size: 1.25rem /* 20/16 */;
    line-height: 1.375rem /* 22/16 */;
    color: #FFFFFF;
  }
  .inner-title {
    margin-top: 1.125rem /* 18/16 */;
    font-size: 2.875rem /* 46/16 */;
    line-height: 3.875rem /* 62/16 */;
    font-weight: 500;
    color: #FFFFFF;
    width: 36.875rem /* 590/16 */;
  }
  .inner-desc {
    margin-top: 1.875rem /* 30/16 */;
    color: rgba(255,255,255,.9);
    font-size: 1.125rem /* 18/16 */;
    line-height: 1;
    font-weight: 300;
  }
  .inner-btn {
    margin-top: 3.75rem /* 60/16 */;
    width: 8.4375rem /* 135/16 */;
    height: 3.125rem /* 50/16 */;
    background: #E50012;
    border-radius: 2px;
    .label {
      font-size: .9375rem /* 15/16 */;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 1;
    }
    .iconfont {
      font-size: 1rem /* 16/16 */;
      line-height: 1;
      color: #FFFFFF;
      margin-left: .125rem /* 2/16 */;
    }
  }
}
.fadeUp-enter-active {
  animation: fadeUp 0.5s ;
}
.fadeUp-enter-from {
  opacity: 0;
  transform: translateY(50px);
}
.fadeUp-enter-to {
  opacity: 1;
  transform: translateY(0);
}
@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.swiper-bar {
  position: absolute;
  bottom: 2.5rem /* 40/16 */;
  left: 0;
  width: 100%;
  z-index: 10;
  .swiper-bar-item {
    width: 5rem /* 80/16 */;
    height: 2px;
    position: relative;
    background: rgba(255,255,255,.6);
    margin: 0 4px;
    &.active {
      .bar-item {
        width: 100%;
        opacity: 1;
      }
    }
    .bar-item {
      width: 0;
      transition: width 7s ease-in-out;
      height: 2px;
      background: #E50012;
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0;
    }
  }
}
.swiper-start-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  .trg {
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid #FFFFFF;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .b-l {
    display: block;
    position: absolute;
    width: 2.5px;
    height: 10px;
    background: #FFFFFF;
    left: 5px;
    top: 4px
  }
  .b-r {
    display: block;
    position: absolute;
    width: 2.5px;
    height: 10px;
    background: #FFFFFF;
    right: 5px;
    top: 4px
  }
}
</style>